<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/stuWelcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>英语版块</el-breadcrumb-item>
      <el-breadcrumb-item>英语角</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    标题-->
    <div class="light">
      <h3>莴苣姑娘2</h3>
    </div>
    <div class="content">
      <p>After a while, his wife got pregnant and gave birth to a pretty girl. The witch swiftly crept off with the baby girl and disappeared into the forest.</p>
      <p>没过多久，妻子怀孕了，生了一个漂亮的女孩。女巫很快就偷走了小女孩，消失在森林里。</p>
      <p>She gave the name Rapunzel to the girl, and this child grew up fast to become a beautiful lady. Yet the witch was afraid of losing Rapunzel, so she locked her up in a tower.</p>
      <p>她给女孩取了个名字叫莴苣姑娘，很快孩子便长大成为一个美丽的姑娘。但是，女巫害怕失去她，所以把她锁在一个塔内。</p>
      <p>"Rapunzel, Rapunzel, please let down your golden hair." When Rapunzel dropped down her long hair, the witch would climb up in order to prevent Rapunzel from meeting other people.</p>
      <p>“莴苣姑娘，莴苣姑娘，请放下你的金色头发。”当女孩把长发放下时，女巫才会爬上塔，这是为了女孩与其他人约会。</p>
      <p>One day, a Prince happened to pass by the tower. The Prince lost his heart to the beautiful singing voice of Rapunzel. "How can I climb up to the tower?" The Prince decided to wait under the tower until he saw an opportunity./p>
      <p>一天，一个王子碰巧经过了附近。王子爱上了莴苣姑娘美丽的歌声。“我怎么样才能爬到塔里去呢？”王子决定在塔下等待时机。</p>
      <p>On the next day, the Prince saw that the witch climbed up to the tower on the lovely yellow hair of Rapunzel. After the witch left the tower, the Prince imitated the witch. He said, "Rapunzel, Rapunzel, please let down your golden hair." Then the long hair was dropped from the inside of the tower.</p>
      <p>第二天，王子看到巫婆爬着莴苣姑娘金色的头发进入塔内。女巫离开塔后，王子模仿了女巫的动作说道：“莴苣姑娘，莴苣姑娘，请放下你的金色头发。”果然，女孩把头发从塔里放了出来。</p>
    </div>
    <div class="light">
      <el-button type="primary" style="margin-top: 20px;" @click="complete">完成阅读</el-button>
    </div>
  </el-card>
</template>

<script>
  export default {
    methods:{
      complete(){
        this.$message({
          message:'恭喜您已完成本篇阅读！',
          type:"success"
        });
        // 跳转至EnglishList页面
        this.$router.replace("/englishList");
      }
    }
  }
</script>
<style scoped>
  .light{
    font-size: 30px;
    text-align: center;
    color: #fefefe;
    text-shadow: 0 0 0.5em #0ae642, 0 0 0.2em #5c5c5c;
    -webkit-animation: shine 2.4s infinite;/*设置动画*/
  }
  @-webkit-keyframes shine{/*创建动画*/
    0%,100%{ color:#fff;text-shadow:0 0 10px #f0d1f8,0 0 10px #0000FF; }
    50%{ text-shadow:0 0 10px #0000FF,0 0 40px #0ae642; }
  }
  .content{
    min-height:350px;
    overflow-y:auto;
    max-height:600px;
  }
  p{
    font-size: 18px;
    color: #fefefe;
    text-shadow:0px 1px 0px #d27878,
    0px 2px 0px #b0b0b0,
    0px 3px 0px #a0a0a0,
    0px 4px 0px #909090,
    0px 5px 10px rgba(0, 0, 0, .9);
  }
</style>
